<%--
  Created by IntelliJ IDEA.
  User: Ice Bear
  Date: 2022/11/21
  Time: 21:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Login</title>
    <script src="/library/layui-v2.7.6/layui/layui.js"></script>
    <link type="text/css" rel="stylesheet" href="/library/layui-v2.7.6/layui/css/layui.css"/>
    <link type="text/css" rel="stylesheet" href="/library/view/css/all.css">
    <link type="text/css" rel="stylesheet" href="/library/view/css/login.css">
</head>
<body class="body" onload="createCode()">


<div class=" login-card">
    <div>
        <h2 class="lib-title">欢 迎 注 册</h2>
    </div>

    <div class="layui-elem-field layui-field-title ">
        <form class="layui-form" action="/library/register" id="item" method="post">
            <div class="layui-form-item input ">
                <label class="layui-form-label">您的账号为:</label>
                <div class="layui-input-inline ">
                    <label class="layui-form-label">${lastId}</label>
                    <input type="text" name="id" id="id" value="${lastId}" lay-verify="title"
                           class="layui-input layui-hide">
                    <label class="layui-form-label"></label>
                </div>
            </div>

            <div class="layui-form-item input">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-inline ">
                    <input type="text" name="username" id="username" value="" lay-verify="username" autocomplete="off"
                           placeholder="请输入用户名"
                           class="layui-input" onblur="checkUserName()">
                </div>
                <label class="layui-form-label layui-progress-big" id="usernameSpan"></label>
            </div>
            <div class="layui-form-item input">
                <label class="layui-form-label ">密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="pwd" value="" autocomplete="off"
                           lay-verify="password" onblur="checkPwd()"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label" id="pwdSpan"></label>
            </div>
            <div class="layui-form-item input">
                <label class="layui-form-label ">确认密码:</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" id="pwd2" value="" autocomplete="off"
                           lay-verify="required" onblur="checkPwd2()"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label" id="pwd2Span"></label>
            </div>
            <div class="layui-form-item input">
                <label class="layui-form-label ">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                </div>
                <label class="layui-form-label" id="sexSpan"></label>
            </div>
            <div class="layui-form-item input">

                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input type="text" name="birthday" lay-verify="date" class="layui-input" id="birthday"
                           placeholder="请选择生日" >
                </div>
                <label class="layui-form-label" id="birthSpan"></label>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">专业</label>
                <div class="layui-input-inline">
                    <select name="profession" id="profession" lay-verify="profession" onblur="checkProfess()" lay-search>
                        <option value="0" selected="selected">请选择专业</option>
                        <option value="计算机科学与技术">计算机科学与技术</option>
                        <option value="软件工程">软件工程</option>
                        <option value="大数据">大数据</option>
                    </select>
                </div>
                <label class="layui-form-label" id="professSpan"></label>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班级</label>
                <div class="layui-input-inline">
                    <select name="classes" id="classes" lay-verify="required" lay-search>
                        <option value="0" selected="selected">请选择班级</option>
                        <option value="1">1班</option>
                        <option value="2">2班</option>
                        <option value="3">3班</option>
                        <option value="4">4班</option>
                        <option value="5">5班</option>
                    </select>
                </div>
                <label class="layui-form-label" id="classSpan"></label>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入学时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="enrollment" lay-verify="date" class="layui-input" id="enrollment"
                               placeholder="请选择入学时间">
                    </div>
                <label class="layui-form-label" id="enrollSpan"></label>
            </div>
            <div class="layui-form-item input">
                <label class="layui-form-label ">验证码:</label>
                <div class="layui-input-inline">
                    <span id="spanCode" style="width: 300px;height: 35px;background-color: white;font-size: 30px"
                          onmounseover="onmounseover()" onclick="createCode()"></span>
                </div>
            </div>
            <div class="layui-form-item input">
                <label class="layui-form-label ">输入验证码:</label>
                <div class="layui-input-inline">
                    <input type="text" id="code" value="" autocomplete="off"
                           lay-verify="password" onblur="checkCode()"
                           placeholder="请输入验证码" autocomplete="off" class="layui-input">
                    <label class="layui-form-label " id="codeSpanCheck"></label>
                </div>
            </div>
            <div class="card">
                <button type="submit" id="submit" disabled="disabled" class="lib-login-but  layui-btn-lg"
                        onclick="checkAll()">注册
                </button>
            </div>
            <div class="card">
                <button type="button" class=" lib-login-but layui-btn-lg"
                        onclick="window.location.href='/library/view/jsp/login.jsp'">已有账号？登录
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#birthday'
        });

        laydate.render({
            elem: '#enrollment'
        });
    });
</script>
<script type="text/javascript">
    function createCode() {
        var code = Math.floor(Math.random() * 9000 + 1000);
        var span = document.getElementById("spanCode");
        span.innerHTML = code;
    }

    //验证码鼠标
    function onmounseover() {
        var span = document.getElementById("spanCode");
        span.style.cursor = "pointer";
    }

    function checkCode() {
        var code = document.getElementById("code");
        var spancode = document.getElementById("spanCode");
        var spancodecheck = document.getElementById("codeSpanCheck");
        if (code.value == spancode.innerHTML) {
            spancodecheck.innerHTML = "";
            return true;
        } else {
            spancodecheck.innerHTML = "验证码有误"
            spancodecheck.style.color = "red";
            return false;
            //自行增加提示语
        }
    }

    function checkUserName() {
        var uname = document.getElementById("username").value;
        var unamespan = document.getElementById("usernameSpan");
        var reg = /^[A-z][0-9A-z]{5,9}$/; //正则表达式
        if (uname == "" || uname == null) {
            unamespan.innerHTML = "用户名不能为空";
            unamespan.style.color = "red";
            return false;
        } else if (reg.test(uname)) {
            unamespan.innerHTML = "用户名正确";
            unamespan.style.color = "green";
            return true;
        } else if (uname.length < 5 || uname.length > 9) {
            unamespan.innerHTML = "用户名需要5-9位";
            unamespan.style.color = "red";
            return true;
        } else {
            unamespan.innerHTML = "请使用正确的用户名格式";
            unamespan.style.color = "red";
            return false;
        }
    }

    //校验输入密码
    function checkPwd() {
        var pwd = document.getElementById("pwd").value;
        var pwdspan = document.getElementById("pwdSpan");
        var reg = /^[A-z]\w{5,9}$/;
        if (pwd == "" || pwd == null) {
            pwdspan.innerHTML = "密码不能为空";
            pwdspan.style.color = "red";
            return false;
        } else if (reg.test(pwd)) {
            pwdspan.innerHTML = "密码格式正确";
            pwdspan.style.color = "green";
            return true;

        } else if (pwd.length.length < 5 || pwd.length > 9) {
            pwdspan.innerHTML = "密码为5-9位";
            pwdspan.style.color = "red";
            return false;
        } else {
            pwdspan.innerHTML = "密码需包含字母";
            pwdspan.style.color = "red";
            return false;
        }
    }

    //校验确认密码
    function checkPwd2() {
        //获取第一次密码
        var pwd = document.getElementById("pwd").value;
        //获取确认密码
        var pwd2 = document.getElementById("pwd2").value;
        //获取span对象
        var span = document.getElementById("pwd2Span");
        //比较两次密码是否相同
        if (pwd2 == "" || pwd2 == null) {
            span.innerHTML = "确认密码不能为空";
            span.style.color = "red";
            return false;
        } else if (pwd == pwd2) {
            span.innerHTML = "确认密码";
            span.style.color = "green";
            return true;
        } else {
            span.innerHTML = "两次密码不一致";
            span.style.color = "red";
            return false;
        }
    }

    function checkProfess(){
        console.log(profess)
        var profess = document.getElementById("profession").value;
        var span = document.getElementById("professSpan");
        if (profess != 0) {
            span.innerHTML = "籍贯选择成功";
            span.style.color = "green";
            return true;
        } else {
            span.innerHTML = "请选择籍贯";
            span.style.color = "red";
            return false;
        }

    }
    //提交验证
    function checkAll() {
        if (checkUserName() && checkPwd() && checkPwd2() &&
            checkCode()) {
            document.getElementById("submit").disabled = false;
        }
    }
</script>
</body>
</html>
